<template>
  <m-win
    v-model:window_open="val.md_add"
    :title="`〔${val.data.list[val.ckkey]?.ss}${
      val.data.list[val.ckkey]?.boss
    }〕队伍操作`"
  >
    <template #content>
      <div class="_box2"><n-button @click="set.new_team">添加新队伍</n-button></div>
      <div class="_box2">
        <m-tabs :value="val.ckss" @update:value="set.addtabhand" :list="set.ss" />
        <div class="addboxmain _box">
          <template v-for="item in val.bdata">
            <div class="addboxlist">
              <n-button @click="set.load_team(item)">导入</n-button>
              <template v-for="(item2, key2) in item.role">
                <img :src="cfg.function.ava(item2?.i, 100)" />
              </template>
              <div>
                {{ cfg.bossnamelist?.[item.boss]?.bname }}（{{
                  (item.dmg / 1000000)?.toFixed(1)
                }}M {{ set.get_wpycl(item.role[0]?.i, item.role[0]?.w)
                }}{{ set.get_wpycz(item.role[0]?.i, item.role[0]?.w, item.boss) }}%）
              </div>
              <div
                v-if="
                  val.data.list[val.ckkey]?.boss != null &&
                  item.boss != val.data.list[val.ckkey]?.boss
                "
              >
                对{{ cfg.bossnamelist?.[val.data.list[val.ckkey]?.boss].bname }}（{{
                  set.get_wpycz(
                    item.role[0]?.i,
                    item.role[0]?.w,
                    val.data.list[val.ckkey]?.boss
                  )
                }}%）
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
  </m-win>

  <m-win
    v-model:window_open="val.md_upd"
    @update:window_open="set.upd_team"
    :wd="550"
    :title="`修改数据`"
  >
    <template #content>
      <div class="nbox2">
        <div class="nbox3">
          <div>team_id：{{ val.upddata.team_id }}</div>
          <div>修改的数据在关闭弹窗后自动保存到缓存，无需手动点击保存</div>
        </div>
        <n-hr />

        <div class="_box2">
          <div>
            预期伤害（实际显示：
            {{ set.toFixedNoRound(val.upddata.dmg / 100000000, 1) }}+）
          </div>
          <div><n-input-number v-model:value="val.upddata.dmg" /></div>

          <div>
            <span>预期伤害显示开关</span>
            <n-select
              v-model:value="val.upddata.dmghide"
              :options="[
                {
                  value: false,
                  label: '显示',
                },
                {
                  value: true,
                  label: '隐藏',
                },
              ]"
            />
          </div>

          <div>
            <span>魔卡遗物属性显示开关</span>
            <n-select
              v-model:value="val.upddata.cardhide"
              :options="[
                {
                  value: false,
                  label: '显示',
                },
                {
                  value: true,
                  label: '隐藏',
                },
              ]"
            />
          </div>

          <div>
            <span>闪电显示开关</span>
            <n-select
              v-model:value="val.upddata.fever"
              :options="[
                {
                  value: true,
                  label: '显示',
                },
                {
                  value: false,
                  label: '隐藏',
                },
              ]"
            />
          </div>

          <div>
            <span>队伍遗物</span>
            <n-select
              v-model:value="val.upddata.yw"
              :options="[
                {
                  value: null,
                  label: '不知道则隐藏',
                },
                {
                  value: '杯',
                  label: '杯',
                },
                {
                  value: '书',
                  label: '书',
                },
              ]"
            />
          </div>
          <div>
            <span>手动异常值</span>
            <div><n-input v-model:value="val.upddata.ycz" /></div>
          </div>
          <div>
            <span>表格备注</span>
            <n-input
              v-model:value="val.upddata.bz"
              placeholder="自动调整尺寸"
              type="textarea"
              size="small"
              :autosize="{
                minRows: 3,
                maxRows: 5,
              }"
            />
          </div>
        </div>

        <div class="_box2">
          <div>
            <span>导入同队伍装备/遗物/魔卡</span>
            <n-select @update:value="set.load_zbk" :options="val.updselect" />
          </div>
          <n-hr />
          <div
            style="
              background-color: var(--banr-bg);
              padding: 10px 8px;
              border-radius: 3px;
              display: flex;
              align-items: center;
              gap: 8px;
              flex-direction: column;
            "
          >
            <m-role
              :ban="['ghz']"
              :maxlimit="4"
              showsp
              showwepon
              showyw
              showmk
              :data="val.upddata.role"
            ></m-role>
          </div>
        </div>
      </div>
    </template>

    <template #footer>
      <n-button @click="set.del_team" type="gt_y">移除该队伍</n-button>
      <n-button @click="set.save_team0" type="gt_n">记录导入</n-button>
      <n-button @click="set.save_team" type="gt_n">记录导入+同步到数据库</n-button>
    </template>
  </m-win>

  <!-- 导入云表格-->
  <m-win v-model:window_open="val.md_load_table" :title="`导入云表格`">
    <template #content>
      <van-overlay :show="val.loading_show">
        <div class="wrapper">
          <div class="ldmain">
            <van-loading vertical>
              <template #icon>
                <van-icon name="star-o" size="30" />
              </template>
              Loading...
            </van-loading>
          </div>
        </div>
      </van-overlay>

      <div>
        <div class="nbox3">
          <div class="loadtable">
            <template v-for="(item, key) in val.cld_list">
              <div class="__list">
                <div>{{ item.label }}</div>
                <div>
                  <n-button size="small" @click="set.load_table_ver(key)" type="gt_y"
                    >获取</n-button
                  >
                </div>
                <div>
                  <n-button
                    size="small"
                    type="gt_n"
                    @click="set.load_table_del(item.value)"
                    v-if="item.uid == cfg?.user?.uid"
                    >删除</n-button
                  >
                </div>
                <div v-if="item.list?.length >= 1" class="__line">
                  <n-timeline>
                    <n-timeline-item
                      v-for="(item2, key2) in item.list"
                      type="info"
                      :title="`版本.${item.ver - key2} By.${item2.username}`"
                      :time="cfg.unix(item2.time)"
                      line-type="dashed"
                      ><n-button
                        size="small"
                        type="gt_y"
                        @click="set.load_table_data(item.value, key2)"
                        >导入</n-button
                      ></n-timeline-item
                    >
                  </n-timeline>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </template>

    <template #footer> </template>
  </m-win>
  <!-- 保存云表格-->
  <m-win v-model:window_open="val.md_savetable" :title="`保存到云表格`">
    <template #content>
      <van-overlay :show="val.loading_show">
        <div class="wrapper">
          <div class="ldmain">
            <van-loading vertical>
              <template #icon>
                <van-icon name="star-o" size="30" />
              </template>
              保存中
            </van-loading>
          </div>
        </div>
      </van-overlay>

      <div class="_box2">
        <div class="nbox3">
          <div v-if="val.data.set.table_id == null">
            该表格未保存到云空间，请选择创建保存或覆盖保存。
            <n-hr />
            覆盖保存可读取最近10个上传版本
          </div>
          <div v-else>
            该表格已保存到云空间，请选择覆盖保存或新建保存
            <n-hr />
            覆盖保存可读取最近10个上传版本
          </div>
        </div>
        <div class="nbox3">
          <div v-if="val.data.set.table_id == null">
            当前账号信息<br />名称:{{ cfg.user?.username }}<br />UID:{{ cfg.user?.uid }}
          </div>
        </div>
        <br />

        <div class="nbox3">
          <div>云表格名称</div>
          <div><n-input v-model:value="val.data.set.cld_title" /></div>
        </div>

        <div class="nbox3" v-if="val.data.set.table_id != null">
          <div>保存到云表格</div>
          <div><n-select :options="val.cld_list" v-model:value="val.cld_id" /></div>
        </div>
      </div>
    </template>

    <template #footer>
      <template v-if="val.data.set.table_id == null">
        <n-button @click="set.save_cld" type="gt_y">保存到云表格</n-button>
      </template>
      <template v-else>
        <n-button @click="set.edit_cld" type="gt_y">覆盖到云表格</n-button>
      </template>
    </template>
  </m-win>

  <m-win
    v-model:window_open="val.md_group"
    :wd="450"
    @update:window_open="set.upd_team"
    :title="`修改数据`"
  >
    <template #content>
      <div class="_box2">
        <div>分组名称</div>
        <div><n-input v-model:value="val.group_ckdata.name" /></div>
        <div>显示BOSS图标（分组需填写正确的boss名称）</div>
        <div><n-switch v-model:value="val.group_ckdata.show_boss" /></div>
        <div>占位模式（隐藏边框隐藏名字数据）</div>
        <div><n-switch v-model:value="val.group_ckdata.show_table" /></div>
        <div>显示炽热图标</div>
        <div><n-switch v-model:value="val.group_ckdata.show_hot" /></div>
        <div>表格占用大小</div>
        <div><n-input-number v-model:value="val.group_ckdata.span" /></div>
        <div>
          <span>底部提示文本</span>
          <n-input
            v-model:value="val.group_ckdata.tips"
            placeholder="自动调整尺寸"
            type="textarea"
            size="small"
            :autosize="{
              minRows: 3,
              maxRows: 5,
            }"
          />
        </div>
      </div>
    </template>

    <template #footer> </template>
  </m-win>

  <m-win
    v-model:window_open="val.md_tips"
    @update:window_open="set.upd_team"
    :wd="550"
    :title="`修改提示文本`"
  >
    <template #content>
      <div class="nbox2">
        <div class="nbox3">
          <div>
            <n-button @click="val.data.set.tips.push({ color: '#000', size: 12 })"
              >添加一行提示文本</n-button
            >
          </div>
          <div
            :style="`margin-top:12px;padding:12px;background-color: ${val.data.set.bgcolor}`"
          >
            <div style="color: #000">实际显示效果</div>
            <div
              :style="`color: ${item.color ?? '#000'};font-size: ${item.size ?? 14}px`"
              v-for="item in val.data?.set?.tips"
            >
              {{ item.text }}
            </div>
          </div>
          <div style="display: flex; gap: 12px; margin-top: 12px; flex-direction: column">
            <div v-for="(item, key) in val.data.set.tips">
              <div class="nbox2">
                <div class="setbox">
                  <n-color-picker v-model:value="val.data.set.tips[key].color" />
                </div>
                <div style="margin-top: 12px"></div>
                <div class="setbox">
                  <n-input-number
                    style="width: 100%"
                    :max="50"
                    v-model:value="val.data.set.tips[key].size"
                  >
                    <template #prefix>大小</template>
                  </n-input-number>
                </div>
                <div style="margin-top: 12px"></div>
                <div class="setbox">
                  <n-input
                    style="width: 100%"
                    v-model:value="val.data.set.tips[key].text"
                  >
                    <template #prefix>内容</template>
                  </n-input>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </m-win>

  <m-win v-model:window_open="val.md_gt" :title="`添加组数据队伍`">
    <template #content>
      <div class="groupboxmain _box">
        <template v-for="item in val.uteam_list">
          <div class="addboxlist">
            <n-button @click="set.load_team_uteam(item)">添加</n-button>
            <template v-for="(item2, key2) in item.role">
              <img :src="cfg.function.ava(item2?.i, 100)" />
            </template>
            <div>{{ (item.dmg / 100000000)?.toFixed(2) }} E</div>
          </div>
        </template>
      </div>
    </template>
  </m-win>

  <m-win v-model:window_open="val.md_add_team" :title="`添加新队伍`">
    <template #content>
      <div class="_box2">
        <div>当前仅管理组可添加新队伍，后续可能会开放本地模式。</div>
      </div>

      <div class="_box2">
        <n-h3>队伍配置</n-h3>
        <div>
          <div>
            <span>首领属性</span>
            <n-select filterable v-model:value="val.addobj.ss" :options="set.ss" />
          </div>
          <div>
            <span>首领名称</span>
            <n-select filterable v-model:value="val.addobj.boss" :options="val.boss" />
          </div>
          <div>
            <span>造成伤害</span>
            <n-input-number v-model:value="val.addobj.damage" />
          </div>
          <div>
            <span>队伍遗物</span>
            <n-select
              v-model:value="val.addobj.yw"
              :options="[
                {
                  value: null,
                  label: '不知道不填',
                },
                {
                  value: '杯',
                  label: '杯',
                },
                {
                  value: '书',
                  label: '书',
                },
              ]"
            />
          </div>
          <div>
            <span>参考视频（可选）</span>
            <n-input v-model:value="val.addobj.video" />
          </div>
        </div>
      </div>
      <div class="_box2">
        <div
          style="
            background-color: var(--banr-bg);
            padding: 10px 8px;
            border-radius: 3px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-direction: column;
          "
        >
          <m-role
            :ban="['ghz']"
            :maxlimit="4"
            showsp
            showwepon
            showyw
            showmk
            :data="val.addobj.role"
          ></m-role>
        </div>
      </div>
    </template>

    <template #footer>
      <n-button @click="set.post_newteam" type="gt_y">提交队伍</n-button>
    </template>
  </m-win>

  <n-config-provider :theme="null">
    <template v-if="cfg.mobile == true">
      <br />
      <div class="nbox1 bg5">
        手机端非平板建议生成截图查看<br />
        <div class="flex g8">
          <n-button type="info" @click="set.md_load_table">导入分刀表</n-button>
          <n-button type="info" @click="capture">生成截图(~5s)</n-button>
        </div>
      </div>
      <br />
    </template>
    <n-scrollbar x-scrollable>
      <div style="white-space: nowrap">
        <div
          style="color: #000"
          class="_mbbox nbox1"
          :style="`background-color: ${val.data.set.bgcolor};`"
        >
          <div class="nbox1" style="flex-direction: row">
            <div class="setbox">
              背景颜色<n-color-picker
                style="width: 120px"
                :actions="['clear']"
                :swatches="['rgba(253, 254, 222,1)', 'rgba(255, 255, 255,1)']"
                v-model:value="val.data.set.bgcolor"
              />
            </div>
            <div class="setbox">
              <n-button strong secondary type="info" @click="set.md_load_table"
                >导入云表格</n-button
              >
            </div>
            <div class="setbox" v-if="cfg.qxpd(['bz']) == true">
              <n-button strong secondary type="info" @click="set.save_table"
                >保存云表格</n-button
              >
            </div>
            <div class="setbox" v-if="cfg.qxpd(['bz']) == true">
              <n-button type="error" @click="set.clear">清空数据</n-button>
            </div>
            <div class="setbox" v-if="cfg.qxpd(['bz']) == true">
              <n-button type="info" @click="val.toolshide = val.toolshide ? false : true"
                >开关编辑</n-button
              >
            </div>

            <div class="setbox">
              <n-button type="info" @click="capture">截图导出</n-button>
            </div>
          </div>

          <div v-if="cfg.qxpd(['bz']) == true">
            <div class="setbox">
              <n-button
                strong
                secondary
                type="info"
                @click="val.bname = val.bname ? false : true"
                >开关角色名</n-button
              >
            </div>
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 12px;
            "
          >
            <div
              ref="captureDiv"
              id="capture-div"
              class="tbbox"
              :style="`background-color: ${val.data.set.bgcolor}`"
            >
              <div
                @click="set.set_title"
                style="
                  font-size: 20px;
                  display: flex;
                  justify-content: center;
                  padding-bottom: 6px;
                "
              >
                {{
                  val.data.set.title ?? "《坎公骑冠剑》协力讨伐 XX期 队伍推荐分刀一图流"
                }}
              </div>
              <div
                @click="set.set_tips"
                style="
                  font-size: 14px;
                  display: flex;
                  padding-bottom: 15px;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div
                  :style="`color: ${item.color ?? '#000'};font-size: ${
                    item.size ?? 14
                  }px;`"
                  v-for="item in val.data?.set?.tips"
                >
                  {{ item.text }}
                </div>
              </div>
              <div class="bossgap">
                <div class="bossbox" v-for="(item, key) in val.data.list">
                  <div class="_nav">
                    <n-popselect
                      class="rtt"
                      v-model:value="val.data.list[key].ss"
                      :options="set.ss"
                      scrollable
                      trigger="click"
                      @update:value="set.save_local"
                    >
                      <div>
                        <template v-if="item.ss == null">选择属性</template>
                        <template v-else>
                          <div :class="`ssicon ssicon_${item.ss}`">
                            <img :src="set.img[item.ss]" />
                          </div>
                        </template>
                      </div>
                    </n-popselect>
                    <n-popselect
                      v-model:value="val.data.list[key].boss"
                      class="rtt"
                      :options="val.boss"
                      scrollable
                      trigger="click"
                      @update:value="set.save_local"
                    >
                      <div>
                        <template v-if="item.boss == null">选择首领</template>
                        <template v-else>
                          <img
                            style="
                              max-width: 70px;
                              max-height: 60px;
                              display: block;
                              margin: 0 auto;
                            "
                            :src="`${cfg.url2}img/${cfg.bossnamelist?.[item.boss]?.icon}`"
                          />

                          <div>
                            {{ cfg.bossnamelist?.[item.boss]?.bname }}
                          </div>
                        </template>
                      </div>
                    </n-popselect>
                    <template v-for="(item2, key2) in set.yc">
                      <div>
                        <div :class="`ssicon ssicon_${item2}`">
                          <img style="height: 35px" :src="set.img[item2]" />
                        </div>
                        <div
                          v-if="item.boss != null"
                          style="font-size: 16px; text-shadow: 0 0 1px #000"
                        >
                          {{ cfg.bossnamelist[item.boss][item2] }}
                        </div>
                      </div>
                    </template>
                  </div>
                  <div v-if="val.toolshide != true && cfg.qxpd(['bz']) == true">
                    <n-button strong secondary type="info" @click="set.add(key)"
                      >添加队伍数据</n-button
                    >
                  </div>
                  <div class="_team">
                    <div
                      @click="set.upd(item2, item, key2, key)"
                      class="team_main"
                      v-for="(item2, key2) in item.list"
                    >
                      <div style="position: relative; height: 45px; padding-left: 5px">
                        <img
                          :class="`teamyc_${set.get_wpycl(
                            item2.role[0]?.i,
                            item2.role[0]?.w
                          )}`"
                          :src="
                            set.img[set.get_wpycl(item2.role[0]?.i, item2.role[0]?.w)]
                          "
                        />
                        <div class="team_imgyc">
                          <template v-if="item2.ycz != null">{{ item2.ycz }}%</template>
                          <template v-else>
                            {{
                              set.get_wpycz(
                                item2.role[0]?.i,
                                item2.role[0]?.w,
                                item.boss
                              )
                            }}%
                          </template>
                        </div>
                      </div>

                      <template v-for="(item3, key3) in item2.role">
                        <div
                          style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 4px;
                          "
                        >
                          <div style="width: 48px; height: 48px; position: relative">
                            <div
                              v-if="item3.w == '二专'"
                              style="
                                position: absolute;
                                right: -3px;
                                top: -3px;
                                color: #fff;
                                background-color: #000000;
                                border-radius: 999px;
                                width: 15px;
                                height: 15px;
                                line-height: 13px;
                                text-align: center;
                                font-size: 13px;
                                font-weight: bold;
                              "
                            >
                              2
                            </div>

                            <img
                              style="
                                position: absolute;
                                width: 38px;
                                z-index: 2;
                                left: -18px;
                                top: -15px;
                              "
                              v-if="key3 == 0"
                              :src="set.img[item3.s]"
                            />
                            <div class="bname" v-if="val.bname == true">
                              {{ cfg.get_bname(item3?.i) }}
                            </div>
                            <img
                              style="width: 48px"
                              :src="cfg.function.ava(item3?.i, 100)"
                            />
                          </div>
                          <div
                            v-if="
                              item2.cardhide != true &&
                              (item3.c != null || item3.y != null)
                            "
                            style="
                              font-size: 11px;
                              text-align: center;
                              line-height: 12px;
                              height: 20px;
                            "
                          >
                            <div>{{ item3.c }}</div>
                            <div>{{ item3.y }}</div>
                          </div>
                        </div>
                      </template>

                      <div
                        style="
                          display: flex;
                          align-items: center;
                          background-color: #ffaf90;
                          border-radius: 999px;
                          padding: 3px;
                        "
                      >
                        <img
                          v-if="item2.yw != null"
                          style="height: 35px"
                          :src="set.img[item2.yw]"
                        />
                      </div>
                      <img
                        v-if="item2.fever"
                        style="height: 28px; position: absolute; left: 3px; top: 2px"
                        :src="set.img['fever']"
                      />
                      <div>
                        <pre style="font-size: 12.5px"><span v-if="item2.dmghide != true"
                      >{{ set.toFixedNoRound(item2.dmg / 100000000, 1) }}+</span
                    > {{ item2.bz ?? "" }}</pre>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="margin-top: 14px"></div>
              <n-button
                v-if="val.toolshide != true && cfg.qxpd(['bz']) == true"
                @click="set.add_group"
                >添加一组数据</n-button
              >
              <div
                style="
                  display: grid;
                  grid-template-columns: repeat(12, minmax(0px, 1fr));
                  gap: 14px;
                "
              >
                <template v-for="(item3, key3) in val.data.group">
                  <template v-if="item3.show_table != true">
                    <div
                      style="
                        display: flex;
                        flex-flow: column wrap;
                        justify-content: flex-start;
                        gap: 15px;
                        border: 2px solid rgb(230, 12, 1);
                        padding: 12px;
                        grid-column: span 3;
                        align-items: stretch;
                      "
                      :style="`grid-column: span ${item3.span ? item3.span : 2};`"
                    >
                      <div v-if="val.toolshide != true && cfg.qxpd(['bz']) == true">
                        <n-button
                          strong
                          secondary
                          type="info"
                          size="small"
                          @click="set.add_group_team(key3)"
                          >添加队伍</n-button
                        >
                        <n-button
                          strong
                          secondary
                          size="small"
                          type="info"
                          @click="set.add_group_setdata(key3)"
                          >设置数据</n-button
                        >

                        <n-button
                          size="small"
                          strong
                          secondary
                          type="info"
                          @click="set.add_group_delgroup(key3)"
                          >删除组</n-button
                        >
                      </div>
                      <div
                        @click="set.add_group_setdata(key3)"
                        style="
                          font-size: 20px;
                          letter-spacing: 3px;
                          display: flex;
                          flex-direction: column;
                          align-items: center;
                        "
                      >
                        <n-flex style="align-items: center; gap: 5px">
                          <template
                            v-if="
                              item3.show_boss == true &&
                              cfg.bossnamelist?.[item3.name]?.icon != null
                            "
                          >
                            <img
                              v-if="item3.show_hot"
                              style="
                                height: 32px;
                                position: absolute;
                                margin-top: -35px;
                                margin-left: -10px;
                              "
                              :src="set.img['fever']" />
                            <img
                              style="height: 50px; display: block; margin: 0 auto"
                              :src="`${cfg.url2}img/${
                                cfg.bossnamelist?.[item3.name]?.icon
                              }`"
                          /></template>
                          <template v-else>
                            <img
                              v-if="item3.show_hot"
                              style="height: 38px"
                              :src="set.img['fever']"
                            />
                            <span>{{ item3.name }}</span></template
                          >
                        </n-flex>
                      </div>
                      <div>
                        <div
                          style="
                            gap: 12px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                          "
                        >
                          <div class="team_main2" v-for="(item4, key4) in item3.list">
                            <template v-for="(item5, key5) in item4">
                              <div
                                @click="set.edgroup_delrole(key3, key4)"
                                style="
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                  gap: 4px;
                                "
                              >
                                <div
                                  style="width: 48px; height: 48px; position: relative"
                                >
                                  <div class="bname" v-if="val.bname == true">
                                    {{ cfg.get_bname(item5) }}
                                  </div>
                                  <img
                                    style="width: 48px"
                                    :src="cfg.function.ava(item5, 100)"
                                  />
                                </div>
                              </div>
                            </template>
                          </div>
                        </div>

                        <div
                          @click="set.add_group_setdata(key3)"
                          style="text-align: center; font-size: 12px; margin-top: 6px"
                        >
                          <pre>{{ item3.tips }}</pre>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div
                      style="
                        display: flex;
                        flex-flow: column wrap;
                        justify-content: flex-start;
                        gap: 15px;
                        grid-column: span 3;
                        align-items: stretch;
                      "
                      :style="`grid-column: span ${item3.span ? item3.span : 2};`"
                    >
                      <div v-if="val.toolshide != true">
                        <n-button
                          strong
                          secondary
                          size="small"
                          type="info"
                          @click="set.add_group_setdata(key3)"
                          >设置数据</n-button
                        >

                        <n-button
                          size="small"
                          strong
                          secondary
                          type="info"
                          @click="set.add_group_delgroup(key3)"
                          >删除组</n-button
                        >
                      </div>
                    </div>
                  </template>
                </template>
              </div>
              <div
                @click="set.set_by"
                style="
                  font-size: 14px;
                  display: flex;
                  justify-content: center;
                  padding-top: 15px;
                "
              >
                {{ val.data.set.by ?? "作者：点击填写" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </n-scrollbar>
  </n-config-provider>
</template>
<style scoped>
.loadtable .__list {
  border-bottom: solid 1px #6b6868;
  padding-bottom: 8px;
  font-size: 1.1em;
  display: flex;
  gap: 0.75em;
  flex-direction: row;
  flex-wrap: wrap;
}
.loadtable .__line {
  width: 100%;
  padding-left: 25px;
  max-height: 200px;
  overflow: auto;
  background-color: #31363f;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 8px;
}
.loadtable {
  display: flex;
  gap: 0.75em;
  flex-direction: column;
}
.groupboxmain {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px;
}
.team_main2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.bname {
  position: absolute;
  bottom: 0;
  height: 14px;
  line-height: 14px;
  font-size: 8.5px;
  background-color: #00000049;
  width: 100%;
  color: #fff;
  text-shadow: 0 0 3px #000;
  text-align: center;
  overflow: hidden;
}
._team {
  position: relative;
  transform: translate(0);
  min-height: 100px;
  margin-bottom: -2px;
}

.team_imgyc {
  position: absolute;
  bottom: -11px;
  width: 45px;
  text-align: center;
  font-size: 12px;
}
._team > .team_main {
  display: flex;
  flex-direction: row;
  padding-top: 6px;
  padding-left: 8px;
  min-height: 86px;
  position: relative;
  padding-bottom: 6px;
  align-items: center;
  gap: 8px;
  border-bottom: solid 2px #e60c01;
}

._team > .team_main:first-child {
  border-top: solid 1px #e60c01;
}

.tbbox {
  width: 1050px;
  min-height: 600px;
  color: #000;
  padding: 15px;
  border: solid 2px #e60c01;
}

.teamyc_击倒 {
  background-color: #7d7000;
  width: 40px;
  border-radius: 8px;
}

.teamyc_击飞 {
  background-color: #00618f;
  width: 40px;
  border-radius: 8px;
}

.teamyc_重伤 {
  background-color: #224711;
  width: 40px;
  border-radius: 8px;
}

.bossbox ._nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0px, 1fr));
}

.bossbox ._nav > div {
  border: solid 1px #de170e;
  border-bottom: solid 2px #de170e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  min-height: 100px;
}

.addboxmain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}
.addboxlist {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.addboxlist img {
  width: 42px;
  border-radius: 0.35em;
  background: var(--ava2-bg);
  padding: var(--ava2-pd);
  outline: var(--ava2-border);
}

.setbox {
  display: flex;
  gap: 12px;
  align-items: center;
}

.bossgap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: 14px;
}

.bossbox {
  border: solid 2px #e60c01;
}

.ssicon {
  padding: 9px;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  display: flex;
  border-radius: 999px;
}

.ssicon img {
  height: 28px;
}

.ssicon_暗 {
  background-color: #8f2598;
}

.ssicon_光 {
  background-color: #d99b00;
}

.ssicon_虚 {
  background-color: #4f626e;
}

.ssicon_水 {
  background-color: #1d75b4;
}

.ssicon_火 {
  background-color: #aa3715;
}

.ssicon_土 {
  background-color: #815f2e;
}

.ssicon_重伤 {
  background-color: #224711;
}

.ssicon_击倒 {
  background-color: #7d7000;
}

.ssicon_击飞 {
  background-color: #00618f;
}

.ssicon_土 img {
  height: 23px;
}
</style>
<script>
import img_fire from "@/assets/img/battle/ic_huo.png";
import img_water from "@/assets/img/battle/ic_shui.png";
import img_land from "@/assets/img/battle/ic_tu.png";
import img_light from "@/assets/img/battle/ic_guang.png";
import img_dark from "@/assets/img/battle/ic_an.png";
import img_void from "@/assets/img/battle/ic_xu.png";
import img_repel from "@/assets/img/battle/jifei.png";
import img_down from "@/assets/img/battle/jidao.png";
import img_hurt from "@/assets/img/battle/zhongshang.png";
import img_fever from "@/assets/img/battle/fever-on.svg";
import img_bei from "@/assets/img/杯.png";
import img_shu from "@/assets/img/书.png";
import img_yqn from "@/assets/img/不填.png";
import img_mino from "@/assets/img/battle/mino.webp";
import img_sg from "@/assets/img/battle/sg.webp";
import { cfg } from "@/cfg/cfg.js";
import { getrole, getbossv2 } from "@/cfg/function.js";
import html2canvas from "html2canvas";
import { nextTick } from "vue";
import { forEach } from "lodash";

export default {
  setup() {
    const captureDiv = ref(null);
    const capture = async () => {
      if (!captureDiv.value) {
        console.error("未找到截图元素！");
        return;
      }

      try {
        // 隐藏工具
        val.toolshide = true;

        // 等待 DOM 更新完成
        await nextTick();

        const dpr = window.devicePixelRatio || 1;
        const canvas = await html2canvas(captureDiv.value, {
          useCORS: true, // 允许加载跨域图片
          allowTaint: true, // 允许污染模式（可选）
          scale: dpr, // 根据设备像素比缩放
        });

        // 转换为图片并下载
        const imgData = canvas.toDataURL("image/png");
        const link = document.createElement("a");
        link.download = "screenshot.png";
        link.href = imgData;
        link.click();

        // 恢复工具显示
        setTimeout(() => {
          val.toolshide = false;
        }, 1000);
      } catch (error) {
        console.error("截图失败:", error);
        // 出错时也恢复工具显示
        val.toolshide = false;
      }
    };

    const set = {
      //加载云表格数据 第二步 获取数据
      load_table_data: async (_id, key) => {
        try {
          val.loading_show = true;
          const back = await cfg.mget({
            url: `${cfg.url2}api/raids_create`,
            query: {
              _id: _id,
              ver: key,
              type: "get_cld_data",
            },
          });

          if (back.code == 0) {
            const d = back.data;
            setTimeout(() => {
              val.data = d;
              val.loading_show = false;
              val.md_load_table = false;
              set.save_local();
            }, 250);
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (e) {
          val.loading_show = false;
          cfg.alert3({
            message: e.message,
          });
        }
      },
      //加载云表格数据 第一步 获取版本号
      load_table_ver: async (key) => {
        try {
          const d = val.cld_list[key];
          const _id = d.value;
          val.loading_show = true;
          const back = await cfg.mget({
            url: `${cfg.url2}api/raids_create`,
            query: {
              _id: _id,
              type: "get_cld_ver",
            },
          });
          if (back.code == 0) {
            setTimeout(() => {
              d.list = back.data.list;
              d.ver = back.data.ver;
              val.loading_show = false;
            }, 250);
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (e) {
          val.loading_show = false;
          cfg.alert3({
            message: e.message,
          });
        }
      },
      //弹出导入云表格，并加载表格数据
      md_load_table: async () => {
        try {
          val.loading_show = true;
          val.md_load_table = true;

          val.cld_list = [];
          const back = await cfg.mpost({
            url: `${cfg.url2}api/raids_create`,
            query: {
              type: "get_cld_list",
            },
            post: {
              user: {
                uid: cfg.user?.uid,
                authkey: cfg.user?.authkey,
                token: cfg.user?.token,
              },
            },
          });
          if (back.code == 0) {
            const d = back.data;
            for (let i = 0; i < d.length; i++) {
              const item = d[i];
              val.cld_list.push({
                uid: item.uid,
                value: item._id,
                label: `[${item.username}]${item.title}`,
              });
            }
          } else {
            throw { code: -1, message: back.msg };
          }

          val.loading_show = false;
        } catch (e) {
          val.loading_show = false;
          cfg.alert3({
            message: e.message,
          });
        }
      },
      //覆盖到云空间
      edit_cld: async () => {
        try {
          val.loading_show = true;
          const d = val.data;
          if (d.set.cld_title == null || d.set.cld_title?.length <= 3) {
            throw { code: -1, message: "请先设置云空间标题，长度大于3个字符" };
          }
          if (val.cld_id == null) {
            throw { code: -1, message: "未选择要覆盖的表格名称" };
          }

          const back = await cfg.mpost({
            url: `${cfg.url2}api/raids_create`,
            query: {
              type: "cld_edit",
            },
            post: {
              user: {
                uid: cfg.user?.uid,
                authkey: cfg.user?.authkey,
                token: cfg.user?.token,
              },
              save_id: val.cld_id,
              data: d,
            },
          });

          val.loading_show = false;
          if (back.code == 0) {
            cfg
              .alert2({
                message: `${back.msg}，点击关闭该窗口。`,
              })
              .then(() => {
                val.md_savetable = false;
              })
              .catch(() => {
                val.md_savetable = false;
              });
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            title: "覆盖到云空间失败",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
          val.loading_show = false;
        }
      },
      //保存到云空间
      save_cld: async () => {
        try {
          val.loading_show = true;
          const d = val.data;
          if (d.set.cld_title == null || d.set.cld_title?.length <= 3) {
            throw { code: -1, message: "请先设置云空间标题，长度大于3个字符" };
          }

          const back = await cfg.mpost({
            url: `${cfg.url2}api/raids_create`,
            query: {
              type: "cld_save",
            },
            post: {
              user: {
                uid: cfg.user?.uid,
                authkey: cfg.user?.authkey,
                token: cfg.user?.token,
              },
              data: d,
            },
          });
          if (back.code == 0) {
            d.set.table_id = back.data.insertedId;
            set.save_local();
            val.loading_show = false;
            cfg
              .alert2({
                title: "提醒",
                message: "已保存到云空间，需要清空当前表格数据吗？",
              })
              .then(() => {
                set.clear();
              })
              .catch(() => {});
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            title: "保存到云空间失败",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
          val.loading_show = false;
        }
      },
      //保存表格
      save_table: async () => {
        try {
          val.md_savetable = true;
          val.cld_id = null;
          val.cld_list = [];
          if (val.data?.set?.table_id != null) {
            val.cld_id = val.data?.set?.table_id;
          }
          const back = await cfg.mpost({
            url: `${cfg.url2}api/raids_create`,
            query: {
              type: "get_cld_list",
            },
            post: {
              user: {
                uid: cfg.user?.uid,
                authkey: cfg.user?.authkey,
                token: cfg.user?.token,
              },
            },
          });

          if (back.code == 0) {
            const d = back.data;
            for (let i = 0; i < d.length; i++) {
              const item = d[i];
              val.cld_list.push({
                value: item._id,
                label: `[${item.username}]${item.title}`,
              });
            }
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            title: "保存到云空间失败",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      set_by: () => {
        if (cfg.qxpd(["bz"]) == false) {
          return;
        }
        if (val.data.set.by == null) {
          const prmt = prompt("请输入作者名称：", "作者：");
          if (prmt == null) {
            return;
          }
          val.data.set.by = prmt;
        } else {
          const prmt = prompt("请输入作者名称：", val.data.set.by);
          if (prmt == null) {
            return;
          }
          val.data.set.by = prmt;
        }
        set.save_local();
        return;
      },

      set_title: () => {
        if (cfg.qxpd(["bz"]) == false) {
          return;
        }
        if (val.data.set.title == null) {
          const prmt = prompt(
            "请输入标题：",
            "《坎公骑冠剑》协力讨伐 XX期 队伍推荐分刀一图流"
          );
          if (prmt == null) {
            return;
          }
          val.data.set.title = prmt;
        } else {
          const prmt = prompt("请输入标题：", val.data.set.title);
          if (prmt == null) {
            return;
          }
          val.data.set.title = prmt;
        }
        set.save_local();
        return;
      },
      set_tips: () => {
        if (cfg.qxpd(["bz"]) == false) {
          return;
        }
        if (val.data.set.tips == null) {
          val.data.set.tips = [];
        }
        val.md_tips = true;
      },

      //根据伤害重组排序
      dmg_sort: (data) => {
        data.sort((a, b) => {
          return b.dmg - a.dmg;
        });
      },
      load_zbk_key: ["w", "s", "c", "y"],
      load_zbk: (data) => {
        for (let index = 0; index < data.length; index++) {
          const element = data[index];
          forEach(set.load_zbk_key, (key) => {
            if (element[key] != null) {
              val.upddata.role[index][key] = element[key];
            }
          });
        }
      },
      add_group_setdata: (key) => {
        if (cfg.qxpd(["bz"]) == false) {
          return;
        }
        val.group_ckdata = val.data.group[key];
        val.md_group = true;
      },

      add_group_team: (key) => {
        val.uteam_list = [];
        for (let index = 0; index < val.data.list.length; index++) {
          const element = val.data.list[index].list;
          for (let index2 = 0; index2 < element.length; index2++) {
            const element2 = element[index2];
            val.uteam_list.push(element2);
          }
        }
        val.click_gt = val.data.group[key];
        val.uteam_list.sort((a, b) => {
          return b.dmg - a.dmg;
        });
        val.md_gt = true;
      },
      load_team_uteam: (team) => {
        let arr = [];
        for (let index = 0; index < team.role.length; index++) {
          const element = team.role[index];
          arr.push(element.i);
        }
        val.click_gt.list.push(arr);
        set.save_local();
        val.md_gt = false;
      },

      add_group_delgroup: (key) => {
        //删除改数组

        cfg
          .alert2({
            title: "提醒",
            message: "要删除该组吗？。",
          })
          .then(() => {
            const g = val.data.group;
            g.splice(key, 1);
            set.save_local();
          })
          .catch(() => {
            // on cancel
          });
      },
      edgroup_delrole: (key, key2) => {
        //删除改数组
        if (cfg.qxpd(["bz"]) == false) {
          return;
        }
        cfg
          .alert2({
            title: "提醒",
            message: "要删除该队伍吗？。",
          })
          .then(() => {
            const g = val.data.group[key];
            g.list.splice(key2, 1);
            set.save_local();
          })
          .catch(() => {
            // on cancel
          });
      },
      add_group: () => {
        if (val.data.group == null) {
          val.data.group = [];
        }

        const username = prompt("请输入要创建的名称：", "通用刀型");
        if (username !== null) {
          val.data.group.push({
            name: username,
            list: [],
          });
        }
        return;
      },
      save_team0: async () => {
        try {
          let d = val.updindex.list[val.updindex2];
          d.typepd = "tb";
          val.md_upd = false;
          const back = await cfg.mpost({
            url: `${cfg.url2}api/raids_create`,
            query: {
              type: "updteam",
            },
            post: {
              user: {
                uid: cfg.user?.uid,
                authkey: cfg.user?.authkey,
                token: cfg.user?.token,
              },
              data: d,
            },
          });
          if (back.code == 0) {
            d.team_id = back.data.team_id;
            set.dmg_sort(val.data.list[val.updindex1].list);
            set.save_local();
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            title: "同步编辑队伍失败",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      save_team: async () => {
        try {
          let d = val.updindex.list[val.updindex2];
          d.typepd = "upd";
          val.md_upd = false;
          const back = await cfg.mpost({
            url: `${cfg.url2}api/raids_create`,
            query: {
              type: "updteam",
            },
            post: {
              user: {
                uid: cfg.user?.uid,
                authkey: cfg.user?.authkey,
                token: cfg.user?.token,
              },
              data: d,
            },
          });
          if (back.code == 0) {
            d.team_id = back.data.team_id;
            set.dmg_sort(val.data.list[val.updindex1].list);
            set.save_local();
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            title: "同步编辑队伍失败",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      upd_team: () => {
        set.save_local();
      },
      del_team: () => {
        val.md_upd = false;
        let d = val.updindex.list;
        d.splice(val.updindex2, 1);
        set.save_local();
      },
      upd: async (d, bd, index2, index1) => {
        if (cfg.qxpd(["bz"]) == false) {
          return;
        }
        val.upddata = d;
        val.updselect = [];
        if (val.upddata.dmghide == null) {
          val.upddata.dmghide = false;
        }
        if (val.upddata.cardhide == null) {
          val.upddata.cardhide = false;
        }
        val.updindex = bd;
        val.updindex2 = index2;
        val.updindex1 = index1;
        val.md_upd = true;

        const back = await cfg.mget({
          url: `${cfg.url2}api/raids_create`,
          query: {
            type: "get_zb",
            team_id: d.team_id,
          },
        });

        if (back.code == 0) {
          for (let index = 0; index < back.data.length; index++) {
            const element = back.data[index];
            val.updselect.push({
              label: element.name,
              value: element.data,
            });
          }
        }
      },
      toFixedNoRound: (num, decimals) => {
        const factor = Math.pow(10, decimals);
        const truncated = Math.floor(num * factor) / factor; // 原始截断值（如 2.36 → 2.3）
        const nextThreshold = (truncated * factor + 0.5) / factor; // 计算 x.x5 阈值（如 2.35）

        // 如果原始数字超过 x.x5，则返回 x.x5；否则返回 x.x
        return num >= nextThreshold ? nextThreshold : truncated;
      },
      load_team: (team) => {
        if (val.data.list[val.ckkey].list == null) {
          val.data.list[val.ckkey].list = [];
        }
        val.data.list[val.ckkey].list.push(team);
        set.dmg_sort(val.data.list[val.ckkey].list);
        set.save_local();
      },
      //获取武器异常类型
      get_wpycl: (icon, type) => {
        try {
          const role = cfg.role_icon[icon];
          const data = type;

          if (data == "本专") {
            return role.ycl;
          } else {
            if (data == "二专") {
              return role.ycl2;
            } else {
              return false;
            }
          }
        } catch (error) {
          return false;
        }
      },
      //获取武器异常值
      get_wpycz: (icon, type, boss) => {
        try {
          const role = cfg.role_icon[icon];
          const data = type;
          let ycz = 0;
          let ycl = "";
          if (data == "本专") {
            ycz = role.yc;
            ycl = role.ycl;
          } else {
            if (data == "二专") {
              ycz = role.yc2;
              ycl = role.ycl2;
            } else {
              return false;
            }
          }
          boss = cfg.bossnamelist[boss];
          if (boss[ycl] != null) {
            return (ycz * boss[ycl]).toFixed(1);
          } else {
            return false;
          }
        } catch (error) {
          return false;
        }
      },
      post_newteam: async () => {
        const d = val.addobj;
        const back = await cfg.mpost({
          url: `${cfg.url2}api/raids_create`,
          query: {
            type: "newteam",
          },
          post: {
            user: {
              uid: cfg.user?.uid,
              authkey: cfg.user?.authkey,
              token: cfg.user?.token,
            },
            data: d,
          },
        });
      },
      addtabhand: async (ss) => {
        try {
          val.ckss = ss;
          const back = await cfg.mget({
            url: `${cfg.url2}api/raids_create`,
            query: {
              type: "list",
              ss: ss,
            },
          });
          if (back.code == -1) {
            throw { code: -1, message: back.msg };
          }
          val.bdata = back.data;
        } catch (error) {
          cfg.alert3({
            title: "获取队伍失败",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      new_team: () => {
        val.addobj = {
          role: [],
        };
        val.md_add_team = true;
      },
      add: (key) => {
        val.ckkey = key;
        val.ckss = val.data.list[val.ckkey]?.ss;
        val.md_add = true;
        set.addtabhand(val.ckss);
      },
      clear: () => {
        cfg
          .alert2({
            title: "警告！！！",
            message: "确定要清空数据并初始化吗？\n清空后无法还原数据",
          })
          .then(() => {
            val.data.set = {
              bgcolor: "rgba(253, 254, 222,1)",
            };
            val.data.list = [{}, {}, {}, {}];
            val.data.group = [];
            const d = val.data;
            const d2 = JSON.stringify(d);
            localStorage.setItem("raids_top_team", d2);
          })
          .catch(() => {
            // on cancel
          });
      },
      save_local: () => {
        //保存缓存
        const d = val.data;
        //把obj转为字符串
        const d2 = JSON.stringify(d);
        //保存到localStorage
        localStorage.setItem("raids_top_team", d2);
      },
      img: {
        火: img_fire,
        水: img_water,
        土: img_land,
        光: img_light,
        暗: img_dark,
        虚: img_void,
        击倒: img_down,
        重伤: img_hurt,
        击飞: img_repel,
        杯: img_bei,
        书: img_shu,
        fever: img_fever,
        不填: img_yqn,
        牛头: img_mino,
        手镯: img_sg,
      },
      yc: ["重伤", "击倒", "击飞"],
      ss: [
        {
          label: "光属性",
          title: "光属性",
          value: "光",
          name: "光",
        },
        {
          label: "暗属性",
          title: "暗属性",
          value: "暗",
          name: "暗",
        },
        {
          label: "虚属性",
          title: "虚属性",
          value: "虚",
          name: "虚",
        },
        {
          label: "火属性",
          title: "火属性",
          value: "火",
          name: "火",
        },
        {
          label: "水属性",
          title: "水属性",
          value: "水",
          name: "水",
        },
        {
          label: "土属性",
          title: "土属性",
          value: "土",
          name: "土",
        },
      ],
    };

    const val = reactive({
      md_add: false,
      boss: [],
      loading_show: false,
      data: {
        set: {
          bgcolor: "rgba(253, 254, 222,1)",
        },
        list: [{}, {}, {}, {}],
      },
    });
    onMounted(async () => {
      await getrole();
      await getbossv2();
      for (let index = 0; index < cfg.bosslist.length; index++) {
        const d = cfg.bosslist[index];
        val.boss.push({
          label: `${d.name}(${d.bname})`,
          value: d.name,
        });
      }

      const load = localStorage.getItem("raids_top_team");
      if (load != null) {
        val.data = JSON.parse(load);
      }
    });
    return { captureDiv, capture, cfg, set, val };
  },
};
</script>
